@import"./head";
@import"./search";
@import"./lunbo";
@import"./bottom";
@import"./stairs";
@import"./navigation";
*{
      margin: 0;
      padding: 0;
}
html,body{
      background-color: #f5f5f5;
}
a{
      text-decoration: none;
}
ul,ol,li{
      list-style: none;
}
img{
    border: none;
    display: block;
}
.safe{
      width: 1190px;
      margin: 0 auto;
}


// 轮播上导航
.top-nav-wai{
      width: 100%;
      height: 36px;
      background-color: #fff;
}
.top-nav{
      height: 100%;
}
.top-nav1{
      width: 240px;
      height: 36px;
      float: left;
      background: url("https://ssl1.sephorastatic.cn/soa/pc/images/classified.png");
}
.top-nav1 a{
      color: #fff;
      line-height: 36px;
      margin-left: 15px;
      font-size: 16px;
}
.top-nav2{
      width: 760px;
      // background-color: plum;
      float: left;
      margin-left: 40px;
      margin-top: 12px;
}
.top-nav2 a{
      width: 64px;
      height: 36px;
      padding-right: 40px;
      color: #000;
      font-size: 16px;
}



// 品牌区域开始
.pinpai{
      height: 436px;
      margin-top: 70px;
}
.pinpai-nav{
      width: 1190px;
      height: 36px;
      // background-color: salmon;
}
.pinpai-nav .pinpai-nav-t{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      // background-color: lightsalmon;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      content: "";
      background-position: -19px -12px;
      background-size: 100%;
}
.pinpai-nav1{
      float: right;
      font-size: 14px;
      line-height: 36px;
      
      
}
.pinpai-nav1 .active{
      font-weight: bolder;
      float: left;
      color: #000;
}
.active1{
      float: left;
      color: #000;
      margin-left: 24px;

}
.active2{
      float: left;
      color: #000;
      margin-left: 24px;
}

.pinpai-xia{
      height: 436px;
      // background-color: springgreen;
}

.pinpai-lunbo{
      width: 590px;
      height: 320px;
      float: left;
      .swiper-container{
            width: 100%;
            height: 100%;
            margin:0 auto;
            #case5{
                  --swiper-theme-color: #ff6600;
                  --swiper-pagination-color: #00ff33;/* 两种都可以 */
            }
            .swiper-button-next {
                  right: 0px;
                  left: auto;
            }
            .swiper-button-prev {
                  left: 20px !important;
                  right: auto;
            }
            img{
                  width: 100%;
                  height: 100%;
            }
      }
      
}

.pinpai-pinpai{
      width: 600px;
      height: 320px;
      // background-color: tomato;
      float: left;
}
.pinpai-pinpai  li{
      width: 150px;
      height: 80px;
      float: left;
      background: #fff;
      border: 1px solid #f5f5f5;
      box-sizing: border-box;
      position: relative;
}
.pinpai-pinpai1{
      display: none;
      width: 150px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0 ,.8);
}
.pinpai-pinpai1 p{
      color: #fff;
      text-align: center;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      padding-top: 12px;
}
.pinpai-pinpai1 a{
      display: block;
      width: 84px;
      height: 20px;
      text-align: center;
      color: #fff;
      background-color: #e00;
      line-height: 18px;
      border-radius: 12px;
      font-size: 12px;
      margin:0 auto;
}
.pinpai-pinpai ul li:hover .pinpai-pinpai1{
      display: block;
}
// 品牌区域结束


// 精品推荐开始
.jingpin{
      
      height: 346px;
      margin-top: 80px;
      background-color: #fff;
}
.jingpin-jingpin{
      height: 346px;
      // background-color: cadetblue;
}
.jingpin-title{
      height: 36px;
      background-color: #fff;
}
.jingpin-title h2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -47px;
      background-size: 100%;
}
.jingpin-tu{
      height: 310px;
      // background-color: crimson;
}

#jingpin-tu1{
      display: block;
      float: left;
      width: 590px;
      height: 300px;
      position: relative;
      // background-color: darkblue;

}
#jingpin-tu2{
      display: block;
      float: left;
      width: 590px;
      height: 300px;
      background-color: darkkhaki;
      margin-left: 10px;
}
.jingpin-nei{
      position: absolute;
      width: 210px;
      top: 10px;
      right: 10px;
      height: 282px;
}
.jingpin-nei1{
      position: relative;
      width: 200px;
      height: 130px;
      margin-bottom: 1px;
      background-color: #fff;
      padding: 10px 0 0 10px;
      cursor: pointer;
      
      .jingpin-p1{
            width: 160px;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            display: inline-block;
            font-weight: bolder;
            color: #000;
      }
      .jingpin-p2{
            width: 160px;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #000;
      }
      .jingpin-p3{
            color: #000;
            position: absolute;
            margin: 25px 0  0 -160px;
            z-index: 1;
            width: 160px;
            height: 20px;
            text-align: left;
            display: inline-block;
            font-size: 14px;
      }
      img{
            width: 90px;
            height: 90px;
            position: absolute;
            bottom: 0;
            right: 5px;
            vertical-align: middle;
            
            
            
      }
      img:hover{
            transition-duration: .3s;
            transition-timing-function: ease-out;
            transform: translateX(-10px);

      }
}
.jingpin-nei2{
      position: relative;
      width: 200px;
      height: 130px;
      margin-bottom: 1px;
      background-color: #fff;
      padding: 10px 0 0 10px;
      cursor: pointer;
      .jingpin-p1{
            width: 160px;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            display: inline-block;
            font-style: normal;
            font-weight: bolder;
            color: #000;
      }
      .jingpin-p2{
            width: 160px;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #000;
      }
      .jingpin-p3{
            color: #000;
            position: absolute;
            margin: 25px 0  0 -160px;
            z-index: 1;
            width: 160px;
            height: 20px;
            text-align: left;
            display: inline-block;
            font-size: 14px;
      }
      img{
            width: 90px;
            height: 90px;
            position: absolute;
            bottom: 0;
            right: 5px;
            vertical-align: middle;
            
            
      }
      img:hover{
            transition-timing-function: ease-out;
            transition-duration: .3s;
            transform: translateX(-10px);
      }

}
// 精品推荐结束

// 渲染器区域
.xuanran{
      height: 605px;
      background-color: seashell;
      overflow: hidden;
}
.xuanran-nav{
      height: 36px;
      background-color: #fff;
}
.xuanran-list{
      float: right;
}
.xuanran-list li{
      float: left;
}
.xuanran-list li a{
      font-size: 14px;
      color: #474747;
      font-weight: 400;
      line-height: 36px;
}
.xuanran-list li em{
      font-style: normal;
      color: #dadada;
      margin: 0 12px;
}
// 护肤品类开始
.xuanran-nav .hufu2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -78px;
      background-size: 100%;
}

// 护肤结束

// 彩妆开始


.xuanran-nav .caizhuang2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -113px;
      background-size: 100%;
}
// 彩妆类结束

// 香氛类开始

.xuanran-nav .xiangfen2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -146px;
      background-size: 100%;
}


// 香氛结束

// 工具开始

.xuanran-nav .gongju2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -247px;
      background-size: 100%;
}

// 工具类结束

// 男士类类开始

.xuanran-nav .nanshi2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -279px;
      background-size: 100%;
}

// 男士类结束

// 洗浴护体开始

.xuanran-nav .xiyu2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -179px;
      background-size: 100%;
}
// 洗浴护体结束


// 美发护发开始

.xuanran-nav .meifa2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -212px;
      background-size: 100%;
}

// 美发结束

// 肤食开始

.xuanran-nav .fushi2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -345px;
      background-size: 100%;
}


// 肤食类结束

// 渲染部分
.allimage{
      height: 500px;
      background-color: #fff;
}
.bigimage{
      width: 390px;
      height: 500px;
      background-color: #fff;
      float: left;
      img{
            display: block;
            width: 390px;
            height: 500px;
      }
}

.smallimage{
      width: 800px;
      height: 500px;
      // background-color:tomato;
      float: left;
}
.smallimage1{
      width: 200px;
      height: 250px;
      border: 1px solid #9d9d9d;
      background-color: #fff;
      float: left;
      box-sizing: border-box;
      padding: 9px 0 15px 10px;
      cursor: pointer;
}
.smallimage1 h4{
      display: block;
      width: 188px;
      height: 17.6px;
      font-size: 14px;
      line-height: 17.6px;

}
.smallimage1 .p1{
      display: block;
      width: 188px;
      height: 17.6px;
      line-height: 17.6px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      font-size: 14px;
}
.smallimage1 .p2{
      display: block;
      width: 188px;
      height: 17.6px;
      font-size: 14px;
      line-height: 17.6px;

}
.smallimage1 .img{
      width: 180px;
      height: 180px;
}
.smallimage1 .img:hover{
      transform: translateX(-10px);
      transition-duration: .3s;
      transition-timing-function: ease-out;
}
.bottomimage{
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      margin-top: 10px;
      background-color: #fff;
      
      
}
.bottomimage1{
      display: block;
      width: 149px;
      height: 60px;
      float: left;
      background-color: #fff;
      
      img{
            width: 144px;
            height: 60px;
            float: left;
      }
      em{
            display: block;
            float: left;
            height: 16px;
            width: 2px;
            background-color: #b1b1b1;
            margin-top: 22px;
            font-style: normal;
            font-weight: 400;
      }
}
.bottomimage1:last-child{
      width: 147px;
      
}


// 猜你喜欢
.cai{
      width: 100%;
      height: 1080px;
      background-color: #fff;
      margin-top: 80px;
}
.cai-cai{
      height: 1080px;
      background-color: #fff;
}
.cai1{
      height: 36px;
}
.cai1 .cai2{
      display: block;
      width: 387px;
      height: 36px;
      float: left;
      font-weight: 700;
      font-size: 100%;
      background-image: url("https://ssl1.sephorastatic.cn/soa/pc/images/sprite_title_v2.png");
      background-position: -20px -313px;
      background-size: 100%;
}
.cai3{
      height: 1041px;
      background-color: #fff;
      font-size: 0px;
}
.cai-cai-1{
      width: 237px;
      height: 259px;
      border-right: 1px solid #f7f7f7;
      border-bottom: 1px solid #f7f7f7;
      display: inline-block;
      background-color: #fff;
      img{
            width: 180px;
            height: 180px;
      }

}
.cai-cai-1 .img{
      width: 180px;
      height: 180px;
      margin: 0 auto;
}
.cai-cai-1 h4{
      display: block;
      width: 196px;
      height: 20px;
      line-height: 20px;
      justify-content: space-between;
      font-size: 14px;
      font-weight: bolder;

}
.cai-cai-1 .p3{
      display: block;
      width: 196px;
      height: 20px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      line-height: 20px;
      justify-content: space-between;
      font-size: 14px;

}
.cai-cai-1 .p3:hover{
      color: red;
      cursor: pointer;
}
.cai-cai-1 .p4{
      display: block;
      width: 196px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      justify-content: space-between;

}

// 猜你喜欢结束




